import { Tabs } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import MemberSelectCore from '@inbiz/basic/MemberSelect';
import Menu from './components/Menu';
import Action from './components/Action';
import Model from './components/Model';
import '../style.less';
import { getMessage } from '@inbiz/react';
const { TabPane } = Tabs;

const RolePermission = (props) => {
  const { appList, currentTab, permConfig, appId, containerHeight } = props;
  const [selectedKey, $selectedKey] = useState('menu');
  const [selectMember, $selectMember] = useState<{
    MemberId?: string;
  }>({});
  useEffect(() => {
    $selectMember({});
  }, [currentTab]);

  useEffect(() => {
    if (!selectMember?.MemberId) {
      $selectedKey('menu');
    }
  }, [selectMember]);
  const callback = (key) => {
    $selectedKey(key);
  };
  const memberSelectProps = useMemo(() => {
    let newprops: any = {
      visible: true,
      config: {
        pageSize: 10,
        showType: 'block',
        showSelection: false,
        multiple: false,
        selected: [],
        // tabs: ['user', 'department', 'position', 'group',],
        onCancel: () => {},
        onOk: (keys, rows) => {},
        onRowClick: (record: any) => {
          console.log(record);
          if (record != undefined) {
            record.MemberType = record.memberarea;
            record.MemberId = record.id;
            record.MemberName = record.name;
            if (record.memberarea == 3) {
              if (record.name == 'Creators') {
                record.MemberType = 2;
              } else if (record.name == 'Everyone') {
                record.MemberType = 6;
              }
            }
          }
          $selectMember(record);
        },
      },
    };
    newprops.config.tabs = permConfig.member;
    return newprops;
  }, [permConfig]);

  return currentTab == 'role' && appList.length ? (
    <div style={{ display: 'flex', paddingTop: 16, minWidth: 1300, height: `100%` }}>
      <div
        className={'role_memberSelect'}
        style={{ width: '620px', marginRight: '20px' }}
      >
        {permConfig.member.length ? (
          <MemberSelectCore {...memberSelectProps} />
        ) : (
          <></>
        )}
      </div>
      {selectMember?.MemberId ? (
        <div style={{ width: 'calc(100% - 640px)' }}>
          <Tabs
            defaultActiveKey="1"
            onChange={callback}
            animated={false}
            className={`${'roleTreeTabs'} ${'menuTabs'}`}
          >
            {permConfig.permType?.length &&
            permConfig.permType.includes('menu') ? (
              <TabPane tab={getMessage('Permission.menu')} key="menu">
                <Menu
                  appList={appList}
                  selectMember={selectMember}
                  permConfig={permConfig}
                  containerHeight={containerHeight}
                />
              </TabPane>
            ) : (
              ''
            )}
            {permConfig.permType?.length &&
            permConfig.permType.includes('action') ? (
              <TabPane tab={getMessage('Permission.action')} key="action">
                <Action
                  appList={appList}
                  selectMember={selectMember}
                  permConfig={permConfig}
                  containerHeight={containerHeight}
                />
              </TabPane>
            ) : (
              ''
            )}
            {permConfig.permType?.length &&
            permConfig.permType.includes('model') ? (
              <TabPane tab={getMessage('Permission.model')} key="model">
                <Model
                  appList={appList}
                  selectMember={selectMember}
                  permConfig={permConfig}
                  appId={appId}
                  containerHeight={containerHeight}
                />
              </TabPane>
            ) : (
              ''
            )}
          </Tabs>{' '}
        </div>
      ) : (
        ''
      )}
    </div>
  ) : (
    <></>
  );
};

export default RolePermission;
